<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="apple-touch-fullscreen" content="YES">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!-- <meta http-equiv="Expires" content="-1">
	<meta http-equiv="pragram" content="no-cache"> -->
	
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>个人成长</title>
	<!--引入pageSlider所需样式表-->
	<link rel="stylesheet" type="text/css" href="css/pageSlider.css">
	<!--引入zepto.js-->
	<script type="text/javascript" src="js/zepto.js"></script>
	<!--引入pageSlider.js文件-->
	<script type="text/javascript" src="js/pageSlider.js"></script>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<!-- <script type="text/javascript" src="js/jquery.rotate.js"></script> -->
	<script src="js/DD_roundies_min.js"></script>
</head>
<body>
	<!--DOM结构-->
	<div class="section sec1">
		
		<!-- 背景 -->
		<div class="bg_img">
			<img src="images/bg1.png" style="height: 100%;width: auto;"/>
		</div>
		
		<div style="text-align: center;">
			<!-- 大圆圈 -->
			<div class="circle1_div">
				<img src="images/circle1.png" class="circle1_img"/>
			</div>
		
			<!-- 小圆圈 -->
			<div class="circle2_div">
				<img src="images/circle2.png" class="circle1_img"/>
			</div>
		
			<!-- 头像 -->
			<div class="circle3_div">
				<img src="" class="circle1_img" id="headImg"/>
			</div>
		</div>
		
		<!-- 当前积分 -->
		<div class="current_score_div">
			<div class="current_score_img">
				<img src="images/current_score.png" class="current_score_img"/>
			</div>
			<div class="score_num" id="score_num"></div>
			
			<div class="score_desc">
			     当前积分	
			</div>
		</div>
		
		<!-- 当前排名 -->
		<div class="current_order_div">
			<div class="current_order_img">
				<img src="images/current_order.png" class="current_order_img"/>
			</div>
			<div class="order" id="ranking"></div>
			<div class="range" id="range">
			   
			</div>
		</div>
		
		<!-- 当前等级 -->
		<div class="current_grade_div">
			<div class="current_order_img">
				<img src="images/current_grade.png" class="current_order_img"/>
			</div>
			<div class="grade" id="grade"></div>
		</div>
		
		<!-- 向上滑动图片 -->
		<div class="bottom_img_div">
             <img src="images/up.png" class="up_img" />
        </div>
        
        <div class="bottom_font_div">
             	向上滑动
        </div>
	</div>
	
	<!-- 第二页 -->
	<div class="section sec2">
		<div class="bg_img">
			<img src="images/bg2.png" style="height: 100%;width: auto;"/>
		</div>
		
		<div class="head_div">
			<div class="rocord_desc">免费通话消费记录</div>
			<div class="sec2_head_image">
				<img src="" class="sec2_circle1_img" id="sec2_headImg"/>
			</div>
		</div>
		
		<!-- 畅会通结缘 -->
		<div class="first_use_date">
			<div class="first_use_date_img" id="first_use_date_img">
				<img src="images/first_use_date.png" class="first_use_date_img"/>
			</div>
		
			<div class="first_use_date_month" id="first_use_date_month"></div>
			
			<div class="first_use_date_desc">
				与畅会通结缘
			</div>
	    </div>
	    
	    <!-- <div class="right_line">
			<canvas id="myCanvas"> </canvas>
		</div>  -->
			
			
		<!-- 第一个月 -->
		<div class="first_month" id="first_month">
			<div class="first_month_img">
				<img src="images/month.png" class="first_month_img"/>
			</div>
			
			<div class="first_month_img_month" id="first_month_img_month">
				
			</div>
			
			<div class="first_month_img_Data">
				<div style="float: left;display: inline;position: relative;">
					<div class="title_time">总时长</div>
					<div class="title_value" id="title_value1"></div>
				</div><br>
				<div style="display: inline;float: left;">
					<div class="title_time">共节约</div>
					<div class="title_value" id="title_value1_1"></div>
				</div>
			</div>
		</div>
		
		<!-- <div class="left_line">
				<img src="images/left.png" class="right_line"/>
		</div> --> 
			
			
		<!-- 第二个月 -->
		<div class="second_month" id="second_month">
			<div class="second_month_img">
				<img src="images/month.png" class="second_month_img"/>
			</div>
			
			<div class="second_month_img_month" id="second_month_img_month">
				
			</div>
			
			<div class="second_month_Data">
				<div style="float: left;display: inline;">
					<div class="title_time">总时长</div>
					<div class="title_value" id="title_value2"></div>
				</div><br>
				<div style="display: inline;float: left;">
					<div class="title_time">共节约</div>
					<div class="title_value" id="title_value2_2"></div>
				</div>
			</div>
		</div>
			
		<!-- 第三个月 -->
		<div class="third_month" id="third_month">
			<div class="third_month_img">
				<img src="images/month.png" class="third_month_img"/>
			</div>
			
			<div class="third_month_img_month" id="third_month_img_month">
				
			</div>
			
			<div class="third_month_img_Data">
				<div style="float: left;display: inline;">
					<div class="title_time">总时长</div>
					<div class="title_value" id="title_value3"></div>
				</div><br>
				<div style="display: inline;float: left;">
					<div class="title_time">共节约</div>
					<div class="title_value" id="title_value3_3"></div>
				</div>
			</div>
		</div>
		
		<div class="bottom_img_div">
             <img src="images/up.png" class="up_img" />
        </div>
        <div class="bottom_font_div">
             	向上滑动
        </div>
	</div>
	
	<!-- 第三页 -->
	<div class="section sec3" align="center">
		<div class="bg_img">
			<img src="images/bg2.png" style="height: 100%;width: auto;"/>
		</div>
		
		<div class="sec3_head_image" align="center">
			<img src="" class="sec3_circle1_img" id="sec3_headImg"/>
		</div>
		
		<div class="sec3_times_image">
			<div class="sec3_times_img">
				<img src="images/times.png" class="sec3_times_img"/>
			</div>
			
			<div class="sec3_times_image_desc">
				累计通话时长
			</div>
			
			<div class="sec3_times_image_num" id="sec3_times_image_num"></div>
			
		</div>
		
		<div class="sec3_cost_image">
			<div class="sec3_times_img">
				<img src="images/cost.png" class="sec3_times_img"/>
			</div>
			
			<div class="sec3_cost_image_desc">
				累计节约成本
			</div>
			
			<div class="sec3_cost_image_num" id="sec3_cost_image_num">
				
			</div>
			
			
		</div>
		
		<div class="sec3_save_ranking_image">
			<div class="sec3_times_img">
				<img src="images/call_count.png" class="sec3_times_img"/>
			</div>
			
			<div class="sec3_save_ranking_image_desc">
				累计呼叫小伙伴儿
			</div>
			
			<div class="sec3_save_ranking_image_num" id="sec3_call_count_image_num">
				
			</div>
		</div>
		
		<div class="sec3_call_count_image">
			<div class="sec3_times_img">
				<img src="images/call_times.png" class="sec3_times_img"/>
			</div>
			
			<div class="sec3_call_count_image_desc">
				累计拨打电话
			</div>
			<div class="sec3_call_count_image_num" id="sec3_call_times_image_num">
				
			</div>
		</div>
		
		
		<!-- <div class="sec3_save_ranking_image">
			<div class="sec3_times_img">
				<img src="images/save_ranking.png" class="sec3_times_img"/>
			</div>
			
			<div class="sec3_save_ranking_image_desc">
				累计节约排名
			</div>
			
			<div class="sec3_save_ranking_image_num" id="sec3_save_ranking_image_num">
				
			</div>
		</div>
		
		<div class="sec3_call_count_image">
			<div class="sec3_times_img">
				<img src="images/call_count.png" class="sec3_times_img"/>
			</div>
			
			<div class="sec3_call_count_image_desc">
				累计呼叫小伙伴儿
			</div>
			<div class="sec3_call_count_image_num" id="sec3_call_count_image_num">
				
			</div>
		</div>
		
		
		<div class="sec3_call_times_image">
			<div class="sec3_times_img">
				<img src="images/call_times.png" class="sec3_times_img"/>
			</div>
			
			<div class="sec3_call_times_image_desc">
				累计拨打电话
			</div>
			
			<div class="sec3_call_times_image_num" id="sec3_call_times_image_num">
				
			</div>
		</div> -->
		
	</div>
	<script type="text/javascript">
			
			$(document).ready(function(){
				var protocol =window.location.protocol;
				var host =window.location.host;
				var path =window.location.search;
				var pamars =path.substring(path.indexOf('?')+1);
				var fileIds =pamars.split("&");
				var userId=fileIds[0].substring(fileIds[0].indexOf('=')+1);
				var companyCode=fileIds[1].substring(fileIds[1].indexOf('=')+1);
				var headImg =document.getElementById("headImg");
				var pathname=window.location.pathname.replace("/h5/score/score.html","").replace("/","");
				
				// 设置人头像 audio.src="http://"+host+"/yokivoice/restful/upload/showPic/"+fileId;
				headImg.src=protocol+"//"+host+"/"+pathname+"/restful/fileUploadController/getUserPicNew?userId="+userId+"&picType=3";
				DD_roundies.addRule('.circle1_img', '6000px', true);
				
				// 获取第一页数据
				$.ajax({ 
					 type: "GET",
					 url: "/"+pathname+"/restful/user/getUserScoreInfo?userId="+userId+"&companyCode="+companyCode,
					 dataType: "json",
					 success: function(resp){
						 var score =resp.userScore;
						 var scoreLevel =resp.scoreLevel;
						 var grade =resp.ranking;
						 $("#score_num").html(score);
						 $("#ranking").html(grade);
						 $("#grade").html("LV"+scoreLevel);
						 $("#range").html("/"+resp.userCount);
						 
					 },
					 error: function(XMLHttpRequest, textStatus, errorThrown) {
						 
					 }
				});
				
				$(function() {
					
					PageSlider.case({"startPage":1,"loop":false,"elastic":false,"callback":{
						
						2:function(){
							var sec2_headImg =document.getElementById("sec2_headImg");
							sec2_headImg.src=protocol+"//"+host+"/"+pathname+"/restful/fileUploadController/getUserPicNew?userId="+userId+"&picType=3";
							DD_roundies.addRule('.sec2_circle1_img', '6000px', true);
							
							
							$.ajax({ 
								 type: "GET",
								 url: "/"+pathname+"/restful/user/queryPersonalUserData?userId="+userId+"&companyCode="+companyCode,
								 dataType: "json",
								 success: function(resp){
									 
									 var first_use_date_month =resp.firstUseDateStr;
									 $("#first_use_date_month").html(first_use_date_month);
									 var arr =resp.dataRecord;
									 if(arr!=null){
										 if(arr.length=3){
											 //前2月
											 var obj1=obj =arr[2];
											 // 前1月
											 var obj2=obj =arr[1];
											 // 当前月 
											 var obj3=obj =arr[0];
											 // 没有数据,只显示与畅会通结缘
											  if(obj1.hasData==false && obj2.hasData==false && obj3.hasData==false){
												 $("#first_month").hide();
												 $("#second_month").hide();
												 $("#third_month").hide();
											 }else{
												 
												 if(obj1.hasData==true){
													 $("#first_month_img_month").html(obj1.month+"月");
													 $("#title_value1").html(obj1.totalTime+"'");
													 $("#title_value1_1").html(obj1.saveCost+"元");
												 }else{
													 $("#first_month_img_month").html(obj1.month+"月");
													 $("#title_value1").html(0+"'");
													 $("#title_value1_1").html(0+"元");
												 }
												 if(obj2.hasData==true){
													 $("#second_month_img_month").html(obj2.month+"月");
													 $("#title_value2").html(obj2.totalTime+"'");
													 $("#title_value2_2").html(obj2.saveCost+"元");
												 }else{
													 $("#second_month_img_month").html(obj2.month+"月");
													 $("#title_value2").html(0+"'");
													 $("#title_value2_2").html(0+"元");
												 }
												 if(obj3.hasData==true){
													 $("#third_month_img_month").html(obj3.month+"月");
													 $("#title_value3").html(obj3.totalTime+"'");
													 $("#title_value3_3").html(obj3.saveCost+"元");
												 }else{
													 $("#third_month_img_month").html(obj3.month+"月");
													 $("#title_value3").html(0+"'");
													 $("#title_value3_3").html(0+"元");
												 }
											 } 
										 } 
									 }
								 },
								 error: function(XMLHttpRequest, textStatus, errorThrown) {
									 
								 }
							});
							
						},
						3:function(){
							var sec3_headImg =document.getElementById("sec3_headImg");
							sec3_headImg.src=protocol+"//"+host+"/"+pathname+"/restful/fileUploadController/getUserPicNew?userId="+userId+"&picType=3";
							DD_roundies.addRule('.sec3_circle1_img', '6000px', true);
							
							
							$.ajax({ 
								 type: "GET",
								 url: "/"+pathname+"/restful/user/queryUserCallInfo?userId="+userId+"&companyCode="+companyCode,
								 dataType: "json",
								 success: function(resp){
									 // 累计通话时长
									 var sec3_times_image_num =resp.callTime+"'";
									 // 累计节约成本
									 var sec3_cost_image_num =resp.saveCost;
									 if(typeof sec3_cost_image_num !='undefined' && sec3_cost_image_num!=null && sec3_cost_image_num !=''){
										 sec3_cost_image_num =sec3_cost_image_num.toFixed(2);
									 }else{
										 sec3_cost_image_num=0;
									 }
									 // 累计节约排名
									 var sec3_save_ranking_image_num =resp.saveCostRanking;
									 // 累计呼叫小伙伴
									 var sec3_call_count_image_num =resp.callUserCount;
									 // 累计呼叫次数
									 var sec3_call_times_image_num =resp.callTimes;
									 
									 $("#sec3_times_image_num").html(sec3_times_image_num);
									 $("#sec3_cost_image_num").html(sec3_cost_image_num+'元');
									 $("#sec3_save_ranking_image_num").html(sec3_save_ranking_image_num);
									 $("#sec3_call_count_image_num").html(sec3_call_count_image_num+'个');
									 $("#sec3_call_times_image_num").html(sec3_call_times_image_num+'次');
									 
								 },
								 error: function(XMLHttpRequest, textStatus, errorThrown) {
									 
								 }
							});
						}}
					});
				});
			});
	</script>
</body>
</html>